<template>
  <div class="u_container">
    <div class="head_model">
      <div class="head_model_style">
        <div class="number_people">￥ {{ amount }}</div>
        <div class="text_people">收到赞助金额</div>
      </div>
    </div>
    <el-table
      :data="dataTables"
      height="70%"
      :header-cell-style="{
        background: ' var(--bgColor1)',
        borderColor: 'var(--borderColor)',
      }"
      style="background-color: var(--bgColor1)"
      :row-style="{
        height: '100%',
        background: ' var(--bgColor1)',
        border: 'none',
      }"
    >
      <el-table-column prop="ordersId" label="订单号" />
      <el-table-column prop="productName" label="商品名称" />
      <el-table-column prop="frequency" label="AI币" />
      <el-table-column prop="payTime" label="支付时间" />
      <el-table-column prop="productPrice" label="商品价格" />
      <el-table-column prop="state" label="支付状态" />
      <el-table-column prop="reasonFailure" label="原因" />
      <el-table-column fixed="right" label="操作">
        <template #header>
          <el-input
            style="width: 180px"
            v-model="prompt"
            size="small"
            placeholder="模糊搜索"
            @change="search"
          />
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: right; padding-top: 10px">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="15"
        background
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import store from "@/store";
import { getOrdersPage } from "../../../../api/BSideApi";
import { conversionTime } from "@/utils/date";

export default {
  name: "ordersDataView",
  computed: {
    store() {
      return store;
    },
  },
  setup() {
    let loginVisible = ref(false);
    const dataTables = ref([]);
    const current = ref(1);
    const total = ref(0);
    const amount = ref(0);
    const prompt = ref("");
    let load = ref(true);
    let empty = ref(false);
    let error = ref(false);
    onMounted(() => {
      if (store.getters.userinfo && store.getters.userinfo.type === "ADMIN") {
        handleCurrentChange(current.value);
      }
    });

    function search() {
      current.value = 1;
      dataTables.value = [];
      handleCurrentChange(1);
    }

    async function handleCurrentChange(pageNum) {
      try {
        let res = await getOrdersPage(pageNum, prompt.value);
        let records = res.orders.records;
        if (records.length > 0) {
          records.forEach((r) => {
            if (!r.email) {
              r.email = "--";
            }
            if (r.state === 0) {
              r.state = "待支付";
            } else if (r.state === 1) {
              r.state = "已支付";
            } else {
              r.state = "已取消";
            }
            if (!r.reasonFailure) {
              r.reasonFailure = "--";
            }
            if (!r.payTime) {
              r.payTime = "--";
            } else {
              r.payTime = conversionTime(r.payTime);
            }
          });
          amount.value = res.totalAmount;
          dataTables.value = records;
          current.value = res.orders.current;
          total.value = res.orders.total;
        } else {
          empty.value = true;
        }
        load.value = false;
        error.value = false;
      } catch (e) {
        load.value = false;
        error.value = true;
      }
    }

    return {
      search,
      load,
      error,
      empty,
      amount,
      total,
      loginVisible,
      handleCurrentChange,
      dataTables,
      prompt,
    };
  },
};
</script>

<style scoped>
@keyframes explainAnimation {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

::v-deep(
    .el-table--enable-row-hover .el-table__body tr:hover td.el-table__cell
  ) {
  background: none !important;
}

::v-deep(
    .el-pagination .is-background .el-pager li:not(.is-disabled).is-active
  ) {
  background-color: rgb(125, 128, 255);
}

::v-deep(.el-table-fixed-column--right) {
  background: var(--bgColor1) !important;
}

::v-deep(
    .el-table--enable-row-hover .el-table__body tr:hover td.el-table__cell
  ) {
  background: none;
}

.head_model {
  display: flex;
  background-color: var(--themeColor1);
  height: 130px;
  margin-bottom: 20px;
  align-items: center;
  border-radius: 3px;
  box-shadow: 0 2px 6px var(--bgColor1);
}

.head_model_style {
  padding-left: 40px;
  color: var(--themeTextColor);
}

.number_people {
  font-size: 35px;
  font-weight: 600;
}

.text_people {
  font-size: 15px;
  margin-top: 5px;
  padding-left: 5px;
}

:deep(.el-input__inner) {
  background: var(--bgColor2);

  font-weight: 400;
  color: var(--textColor2);
}

:deep(.el-input__wrapper) {
  background: var(--bgColor2);
  box-shadow: none;
}
</style>
